<template>
    <div class="Grid">
        <!-- <TreeFilter></TreeFilter>   -->
        <div class="table-box">
            <div class="headerBar">

            </div>
            <ProTable :isShowSearch="false" :staffInfoData="staffInfoData" @openDoor="openDoor">
                <!-- 表格 header 按钮 -->
                <template #tableHeader>
                    <el-button type="primary" @click="addStaffData" :icon="CirclePlus">新增商品分类</el-button>
                    <!-- <el-button type="primary" :icon="Upload" plain>批量添加员工</el-button> -->
                    <!-- <el-button type="primary" :icon="Download" plain >导出用户数据</el-button> -->
                </template>
            </ProTable>
        </div>
    </div>



    <el-dialog v-model="centerDialogVisible" title="添加商品分类" width="500" center>
        <el-scrollbar>
            <el-form ref="ruleFormRef" label-width="120px" :model="reformData" label-suffix=" :" :rules="rules">

                <el-form-item label="一级分类名" prop="TopcategoryName">
                    <el-select v-model="reformData.TopcategoryName" clearable placeholder="大分类" style="width: 240px">
                        <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label" />
                    </el-select>
                </el-form-item>


                <el-form-item label="二级分类名" prop="categoryName">

                    <el-select v-model="reformData.categoryName" clearable placeholder="第二分类" style="width: 240px">
                        <el-option v-for="item in options1" :key="item.label" :label="item.label" :value="item.label" />
                    </el-select>
                </el-form-item>

                <el-form-item label="类别图片" prop="category1Img">
                    <ImageUpload ref="clearImg" @getImgurl="getImgurl"></ImageUpload>
                </el-form-item>

            </el-form>
        </el-scrollbar>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="reset(ruleFormRef)">取消</el-button>
                <el-button type="primary" @click="submitCategory(ruleFormRef)">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
  
<script setup>

import ProTable from "@/components/Protable/goodsCategory.vue";
import ImageUpload from "@/components/Upload/uImg.vue"

import { mainStore } from "@/stores";


import { CirclePlus, } from "@element-plus/icons-vue";
import { ref, onMounted, computed, reactive, watch } from "vue"
import {  ElMessage } from 'element-plus'
import { userManage } from "@/stores/user.js"

import { goodsInfo } from "@/stores/goodsInfo.js"
// 这主要是拿用户商铺的id
let mStore = mainStore();
let usermanage = userManage()

//商品的stores
let goodsinfo = goodsInfo()
//   增加员工的实例
let userY = ref()
//列表的实例
let ruleFormRef = ref()

//图片属性
let category1Img = ref()

//图片组件属性
let clearImg = ref()


//一级选择框设置
const options = [
    {
        value: 1,
        label: '水果鲜花',
        children: [
            { value: 1.1, label: '苹果' },
            { value: 1.2, label: '香蕉' },
            { value: 1.3, label: '橙子' },
            { value: 1.4, label: '草莓' },
            { value: 1.5, label: '葡萄' },
            { value: 1.6, label: '玫瑰' },
            { value: 1.7, label: '百合' },
            { value: 1.8, label: '康乃馨' },
            { value: 1.9, label: '兰花' },
            { value: 1.10, label: '桔子' },
        ]
    },
    {
        value: 2,
        label: '蔬菜豆制品',
        children: [
            { value: 2.1, label: '白菜' },
            { value: 2.2, label: '胡萝卜' },
            { value: 2.3, label: '黄瓜' },
            { value: 2.4, label: '豆腐' },
            { value: 2.5, label: '豆浆' },
            { value: 2.6, label: '香菇' },
            { value: 2.7, label: '木耳' },
            { value: 2.8, label: '菠菜' },
            { value: 2.9, label: '土豆' },
            { value: 2.10, label: '番茄' },
        ]
    },
    {
        value: 3,
        label: '肉蛋水产',
        children: [
            { value: 3.1, label: '猪肉' },
            { value: 3.2, label: '牛肉' },
            { value: 3.3, label: '鸡肉' },
            { value: 3.4, label: '鸡蛋' },
            { value: 3.5, label: '鱼' },
            { value: 3.6, label: '虾' },
            { value: 3.7, label: '蟹' },
            { value: 3.8, label: '贝类' },
            { value: 3.9, label: '鸭肉' },
            { value: 3.10, label: '鹅肉' },
        ]
    },
    {
        value: 4,
        label: '坚果干货',
        children: [
            { value: 4.1, label: '核桃' },
            { value: 4.2, label: '杏仁' },
            { value: 4.3, label: '腰果' },
            { value: 4.4, label: '开心果' },
            { value: 4.5, label: '花生' },
            { value: 4.6, label: '干香菇' },
            { value: 4.7, label: '干木耳' },
            { value: 4.8, label: '枸杞' },
            { value: 4.9, label: '红枣' },
            { value: 4.10, label: '桂圆干' },
        ]
    },
    {
        value: 5,
        label: '谷物杂粮',
        children: [
            { value: 5.1, label: '大米' },
            { value: 5.2, label: '小麦粉' },
            { value: 5.3, label: '玉米' },
            { value: 5.4, label: '燕麦' },
            { value: 5.5, label: '荞麦' },
            { value: 5.6, label: '黑米' },
            { value: 5.7, label: '红豆' },
            { value: 5.8, label: '绿豆' },
            { value: 5.9, label: '薏仁' },
            { value: 5.10, label: '糙米' },
        ]
    },
    {
        value: 6,
        label: '调味品',
        children: [
            { value: 6.1, label: '酱油' },
            { value: 6.2, label: '醋' },
            { value: 6.3, label: '盐' },
            { value: 6.4, label: '糖' },
            { value: 6.5, label: '味精' },
            { value: 6.6, label: '胡椒粉' },
            { value: 6.7, label: '辣椒酱' },
            { value: 6.8, label: '蚝油' },
            { value: 6.9, label: '豆瓣酱' },
            { value: 6.10, label: '芝麻油' },
        ]
    },
    {
        value: 7,
        label: '饮料茶饮',
        children: [
            { value: 7.1, label: '果汁' },
            { value: 7.2, label: '碳酸饮料' },
            { value: 7.3, label: '矿泉水' },
            { value: 7.4, label: '绿茶' },
            { value: 7.5, label: '红茶' },
            { value: 7.6, label: '咖啡' },
            { value: 7.7, label: '奶茶' },
            { value: 7.8, label: '花草茶' },
            { value: 7.9, label: '运动饮料' },
            { value: 7.10, label: '椰汁' },
        ]
    },
    {
        value: 8,
        label: '零食小吃',
        children: [
            { value: 8.1, label: '薯片' },
            { value: 8.2, label: '饼干' },
            { value: 8.3, label: '糖果' },
            { value: 8.4, label: '巧克力' },
            { value: 8.5, label: '果冻' },
            { value: 8.6, label: '爆米花' },
            { value: 8.7, label: '辣条' },
            { value: 8.8, label: '海苔' },
            { value: 8.9, label: '肉脯' },
            { value: 8.10, label: '坚果棒' },
        ]
    },
    {
        value: 9,
        label: '乳制品',
        children: [
            { value: 9.1, label: '牛奶' },
            { value: 9.2, label: '酸奶' },
            { value: 9.3, label: '奶酪' },
            { value: 9.4, label: '黄油' },
            { value: 9.5, label: '炼乳' },
            { value: 9.6, label: '奶粉' },
            { value: 9.7, label: '奶油' },
            { value: 9.8, label: '芝士' },
            { value: 9.9, label: '冰淇淋' },
            { value: 9.10, label: '布丁' },
        ]
    },
    {
        value: 10,
        label: '冷冻食品',
        children: [
            { value: 10.1, label: '饺子' },
            { value: 10.2, label: '汤圆' },
            { value: 10.3, label: '包子' },
            { value: 10.4, label: '馒头' },
            { value: 10.5, label: '披萨' },
            { value: 10.6, label: '冷冻海鲜' },
            { value: 10.7, label: '冷冻肉类' },
            { value: 10.8, label: '冷冻蔬菜' },
            { value: 10.9, label: '冷冻甜点' },
            { value: 10.10, label: '自热米饭' },
        ]
    },
    {
        value: 11,
        label: '海鲜水产',
        children: [
            { value: 11.1, label: '鱼' },
            { value: 11.2, label: '虾' },
            { value: 11.3, label: '蟹' },
            { value: 11.4, label: '贝类' },
            { value: 11.5, label: '海参' },
            { value: 11.6, label: '鲍鱼' },
            { value: 11.7, label: '鱿鱼' },
            { value: 11.8, label: '带鱼' },
            { value: 11.9, label: '鳗鱼' },
            { value: 11.10, label: '龙虾' },
        ]
    },
    {
        value: 12,
        label: '烘焙原料',
        children: [
            { value: 12.1, label: '面粉' },
            { value: 12.2, label: '酵母' },
            { value: 12.3, label: '黄油' },
            { value: 12.4, label: '糖粉' },
            { value: 12.5, label: '可可粉' },
            { value: 12.6, label: '香草精' },
            { value: 12.7, label: '泡打粉' },
            { value: 12.8, label: '巧克力豆' },
            { value: 12.9, label: '杏仁片' },
            { value: 12.10, label: '椰蓉' },
        ]
    },
    {
        value: 13,
        label: '保健食品',
        children: [
            { value: 13.1, label: '维生素C' },
            { value: 13.2, label: '钙片' },
            { value: 13.3, label: '鱼油' },
            { value: 13.4, label: '蛋白粉' },
            { value: 13.5, label: '益生菌' },
            { value: 13.6, label: '螺旋藻' },
            { value: 13.7, label: '蜂胶' },
            { value: 13.8, label: '叶黄素' },
            { value: 13.9, label: '辅酶Q10' },
            { value: 13.10, label: '褪黑素' },
        ]
    },
    {
        value: 14,
        label: '方便速食',
        children: [
            { value: 14.1, label: '方便面' },
            { value: 14.2, label: '自热火锅' },
            { value: 14.3, label: '即食粥' },
            { value: 14.4, label: '即食米饭' },
            { value: 14.5, label: '即食面条' },
            { value: 14.6, label: '即食粉丝' },
            { value: 14.7, label: '即食汤' },
            { value: 14.8, label: '即食意面' },
            { value: 14.9, label: '即食沙拉' },
            { value: 14.10, label: '即食寿司' },
        ]
    },
    {
        value: 15,
        label: '酒类饮品',
        children: [
            { value: 15.1, label: '白酒' },
            { value: 15.2, label: '红酒' },
            { value: 15.3, label: '啤酒' },
            { value: 15.4, label: '威士忌' },
            { value: 15.5, label: '伏特加' },
            { value: 15.6, label: '清酒' },
            { value: 15.7, label: '朗姆酒' },
            { value: 15.8, label: '龙舌兰' },
            { value: 15.9, label: '葡萄酒' },
            { value: 15.10, label: '香槟' },
        ]
    },
    {
        value: 16,
        label: '茶叶咖啡',
        children: [
            { value: 16.1, label: '绿茶' },
            { value: 16.2, label: '红茶' },
            { value: 16.3, label: '乌龙茶' },
            { value: 16.4, label: '白茶' },
            { value: 16.5, label: '黑茶' },
            { value: 16.6, label: '普洱茶' },
            { value: 16.7, label: '咖啡豆' },
            { value: 16.8, label: '速溶咖啡' },
            { value: 16.9, label: '挂耳咖啡' },
            { value: 16.10, label: '冷萃咖啡' },
        ]
    },
    {
        value: 17,
        label: '进口食品',
        children: [
            { value: 17.1, label: '进口巧克力' },
            { value: 17.2, label: '进口饼干' },
            { value: 17.3, label: '进口奶酪' },
            { value: 17.4, label: '进口红酒' },
            { value: 17.5, label: '进口橄榄油' },
            { value: 17.6, label: '进口罐头' },
            { value: 17.7, label: '进口火腿' },
            { value: 17.8, label: '进口咖啡' },
            { value: 17.9, label: '进口果汁' },
            { value: 17.10, label: '进口糖果' },
        ]
    },
    {
        value: 18,
        label: '地方特产',
        children: [
            { value: 18.1, label: '北京烤鸭' },
            { value: 18.2, label: '四川腊肉' },
            { value: 18.3, label: '云南火腿' },
            { value: 18.4, label: '新疆葡萄干' },
            { value: 18.5, label: '宁夏枸杞' },
            { value: 18.6, label: '广东腊肠' },
            { value: 18.7, label: '湖南剁椒' },
            { value: 18.8, label: '贵州酸汤' },
            { value: 18.9, label: '山东大葱' },
            { value: 18.10, label: '江苏阳澄湖大闸蟹' },
        ]
    },
    {
        value: 19,
        label: '有机食品',
        children: [
            { value: 19.1, label: '有机大米' },
            { value: 19.2, label: '有机蔬菜' },
            { value: 19.3, label: '有机水果' },
            { value: 19.4, label: '有机牛奶' },
            { value: 19.5, label: '有机鸡蛋' },
            { value: 19.6, label: '有机豆制品' },
            { value: 19.7, label: '有机坚果' },
            { value: 19.8, label: '有机蜂蜜' },
        ]
    }
]


// 二级分类名

let options1 = computed(() => {

    let result = null

    const foundOptions = options.filter(e => e.label == reformData.TopcategoryName);
    // console.log(foundOptions.length > 0 ? foundOptions[0].children : null, "foundOptions")
    return foundOptions.length > 0 ? foundOptions[0].children : null
})


// 对话框显示隐藏
const centerDialogVisible = ref(false)

let reformData = reactive({
    categoryName: "",
    shopAddId: mStore.userinfo.shopAddress.id,
    TopcategoryName: "",
    category1Img: "",
    other: 1,
    id:0
})

//表单的限制
let rules = reactive({
    TopcategoryName: [
        { required: true, message: '请选择商品分类名', trigger: 'change' },
    ],

    categoryName: [
        { required: true, message: '请输入商品分类名', trigger: 'blur' },
    ],
    category1Img: [
        { required: true, message: '请输入用户的头像', trigger: 'blur' },
    ],
})


//表单重置

let reset = () => {
    clearImg.value.clearImg()

    ruleFormRef.value.resetFields()
    reformData.TopcategoryName = ''
    reformData.category1Img = ''
    reformData.categoryName = ''
    reformData.other = 1
    reformData.id = 0
    usermanage.imgUrl=""
    centerDialogVisible.value = false
}

let submitCategory = (formEl) => {
    if (!formEl) return
    formEl.validate(async (valid, fields) => {
        if (valid) {
            let res = await goodsinfo.uploadGoodsCategory(reformData)
            if (res.code == 200) {
                reset()
                // emit("uploadSuccess")
                goodsinfo.getcategory1Data({shopAddId:reformData.shopAddId})
              
                ElMessage({
                    showClose: true,
                    message: res.mess,
                    type: 'success',
                })
            } else {
                ElMessage({
                    showClose: true,
                    message: res.mess,
                    type: 'error',
                })
            }
            // console.log(res, "上传成功")
        } else {
            console.log('提交失败!', fields)
        }
    })
}

//获取上传的图片 地址
let getImgurl = (e) => {
    // console.log(e, "我是父亲")
    reformData.category1Img = e
}


// watch(()=>goodsinfo.updatacategory1Data,(e)=>{
//     reformData.TopcategoryName = e.TopcategoryName
//     reformData.category1Img = e.category1Img
//     reformData.categoryName = e.categoryName
//     reformData.shopAddId = e.shopAddId
//     reformData.other = e.other
//     reformData.id = e.id
 

//     console.log(e,"检测到的数据")
// })

//   // 添加新员工数据 
let addStaffData = () => {
    // userY.value.acceptParams(true)

    centerDialogVisible.value = true
}

//   //打开设置员工身份的拉窗  方法是表格中触发的
let openDoor = (e) => {
    centerDialogVisible.value = true

        // console.log(e,"e")
        reformData.TopcategoryName = e.TopcategoryName
    reformData.category1Img = e.category1Img
    reformData.categoryName = e.categoryName
    reformData.shopAddId = e.shopAddId
    reformData.other = e.other
    reformData.id = e.id
 
}


let staffInfoData = computed(() => {
    // return mStaff.staffInfo
    // console.log("啦啦啦啦")
    return goodsinfo.category1Data
})


onMounted(() => {
 
    goodsinfo.getcategory1Data({shopAddId:reformData.shopAddId})
   
})

//   onBeforeUnmount(() => {
//     // proxy.$Bus.off("changeCurrentPage", changeCurrentPage)
//     // proxy.$Bus.off("changeSizePage", changeSizePage)
//   })
</script>
  
<style lang="scss" scoped>
.Grid {
    width: 100%;
    display: flex;
    // height: calc(100vh - 142px);

    .table-box {
        width: 100%;
        box-sizing: border-box;
        height: calc(100vh - 142px);
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto 1fr;
        margin-left: 5px;

        .headerBar {}

    }
}
</style>

